<!-- 排班管理 -->
<template>
  <div
    class="dashboard-container transport-task customer-list-box"
    @click="clickDialog"
  >
    <el-card
      class="box-card"
    >
      <el-form
        ref="formList"
        :inline="true"
        class="demo-form-inline"
        label-width="80px"
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="员工账号">
              <el-input
                v-model="fromDate.employeeNumber"
                placeholder="请输入员工账号"
                style="width: 250px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="员工姓名">
              <el-input
                v-model="fromDate.name"
                placeholder="请输入员工姓名"
                style="width: 250px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工作模式">
              <el-select
                v-model="fromDate.workPatternId"
                placeholder="请选择工作模式"
                style="width: 250px"
                @click.native="selectWorkHistory"
              >
                <el-option
                  v-for="item in HistoryList"
                  :key="item.id"
                  :value="item.name"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="月份">
              <div class="box">
                <el-date-picker
                  v-model="fromDate.month"
                  type="month"
                  placeholder="请选择月份"
                >
                </el-date-picker>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属机构">
              <el-input
                v-model="fromDate.agencyId"
                placeholder="所属机构"
                style="width: 250px"
                @click.native="openTree"
              >
              </el-input>
              <div
                v-if="showTree"
                class="eel-tb"
              >
                <el-tree
                  v-loading="isLoading"
                  :data="treeList"
                  :props="defaultProps"
                  class="tree-box"
                  @node-click="selectNode"
                >
                </el-tree>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button
              class="btn"
              @click="searchValue"
            >搜索</el-button>
            <el-button @click.native="resetForm">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 列表 -->
    <el-card class="el-card">
      <el-button
        class="btn"
        @click="$router.push('/transit/workArrange-setting')"
      >排班设置</el-button>
      <el-button
        class="btn-two"
        @click="bindForm"
      >绑定排班</el-button>
      <el-table
        class="tab"
        :data="list"
        style="width: 100%"
        @selection-change="changeVal"
      >
        <el-table-column
          type="selection"
          width="55"
          fixed
        > </el-table-column>
        <el-table-column
          label="员工账号"
          prop="employeeNumber"
          fixed
          width="120"
        >
        </el-table-column>
        <el-table-column
          label="员工姓名"
          fixed
          prop="name"
          width="120"
        >
        </el-table-column>
        <el-table-column
          label="员工电话"
          prop="phone"
          fixed
          width="120"
        >
        </el-table-column>
        <el-table-column
          label="员工角色"
          prop="userType"
          fixed
          width="120"
        >
          <template #default="{ row }">
            <span v-if="row.userType === 1">员工</span>
            <span v-if="row.userType === 2">快递员</span>
            <span v-if="row.userType === 3">司机</span>
          </template>
        </el-table-column>
        <el-table-column
          label="当前工作模式"
          prop="workPatternName"
          fixed
          width="120"
        >
        </el-table-column>
        <el-table-column
          v-for="(item, index) in 30"
          :key="index"
          :label="item + ''"
          prop="workSchedules"
        >
          <template #default="{ row }">
            <span
              v-if="row.workSchedules[item]"
              class="rest"
            >休</span>
            <span
              v-else
              class="work"
            >上</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="fromDate.page"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="fromDate.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="pag"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-card>

    <!-- 弹层 -->
    <el-dialog
      title="人工调整"
      :visible="isDialog"
      width="35%"
    >
      <el-form
        style="text-align: center; font-size: 13px; font-weight: 700;"
        label-width="80px"
      >
        <el-radio-group
          v-model="form.workPatternType"
        >
          <el-radio
            style="font-weight: 700;"
            label="1"
          >礼拜制</el-radio>
          <el-radio
            style="font-weight: 700;"
            label="2"
          >连续制</el-radio>
        </el-radio-group>
        <el-form-item
          label="活动名称"
          style="margin-top: 20px; width: 400px;"
        >
          <el-select
            v-if="form.workPatternType==='1'"
            v-model="form.workPatternId"
            placeholder="请选择"

            @click.native="oneOpenList"
          >
            <el-option
              v-for="item in oneList"
              :key="item.id"
              v-loading="isLoading"
              :label="item.name"
              :value="item.id"
            >

            </el-option>
          </el-select>
          <el-select
            v-else
            v-model="form.workPatternId"
            placeholder="请选择"
            @click.native="oneOpenList"
          >
            <el-option
              v-for="ele in twoList"
              :key="ele.id"
              v-loading="isLoading"
              :label="ele.name"
              :value="ele.userType"
            >

            </el-option>
          </el-select>
        </el-form-item>

      </el-form>

      <div
        slot="footer"
        class="dialog-footer"
      >

        <el-button
          class="btn"
          @click="addForm"
        >确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>

      </div>

    </el-dialog>
  </div>
</template>
<script>
import { workManage, selectWorkHistoryList, peopleSet } from '@/api/transit'
import { agencyList } from '@/api/institutions'

export default {
  data() {
    return {
      list: [],
      isDialog: false,
      isLoading: false,
      showTree: false, // 是否显示tree
      fromDate: {
        page: 1,
        pageSize: 10,
        employeeNumber: '',
        name: '',
        agencyId: '',
        month: '',
        userType: '',
        workPatternId: ''
      },
      workPatternName: '',
      total: 0,
      allowableVolume: '',
      treeList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      form: {
        userIdList: [],

        workPatternId: '',
        workPatternType: '1'
      },
      HistoryList: [], // 工作模式下拉列表
      oneList: [], // 礼拜制下拉列表
      twoList: [], // 连续制下拉列表
      radio: 1

    }
  },
  created() {
    this.getList()
  },
  methods: {
    /**
 * 人工调整
 */
    async addForm() {
      await peopleSet(this.form)

      this.$message.success('绑定成功')
      this.closeDialog()
      this.getList()
    },
    /**
     * 人工调整下拉框
     */
    async oneOpenList() {
      this.isLoading = true
      const res = await selectWorkHistoryList()
      // console.log(res.data[1])

      this.oneList = res.data[1]
      this.twoList = res.data[2]
      // console.log(res.data)
      this.isLoading = false
    },
    /**
     * 复选框状态
     */
    changeVal(data) {
      this.form.userIdList = []
      // console.log(selection)
      data.forEach(item => {
        this.form.userIdList.push(item.id)
      })
      // console.log(this.userIdList)
    },
    closeDialog() {
      this.isDialog = false
      this.form = {}
    },
    /**
     * 绑定排班
     */
    bindForm() {
      if (this.form.userIdList.length === 0) {
        return this.$message.error('请选择调整人员')
      }
      this.isDialog = true
    },
    /**
     * 精确搜索
     */
    async searchValue() {
      const res = await workManage(this.fromDate)
      // console.log(res)
      this.list = res.data.items
    },
    /**
     * 重置表单
     */
    resetForm() {
      this.fromDate = {}
      this.getList()
    },
    /**
     * 点击空白关闭弹窗
     */
    clickDialog() {
      this.showTree = false
    },
    /**
     * 显示数据
     */
    selectNode(treeList) {
      console.log(treeList)
      if (treeList.children && treeList.children.length > 0) return
      this.fromDate.agencyId = treeList.name
      this.showTree = false
    },
    /**
     * 工作模式下拉框
     */
    async selectWorkHistory() {
      this.isLoading = true
      const res = await selectWorkHistoryList()
      // console.log(res.data[1])
      this.HistoryList = res.data[1]
      this.oneList = res.data[0]
      this.twoList = res.data[2]
      console.log(res.data)
      this.isLoading = false
    },
    /**
     * 所属机构树形结构
     */
    async openTree() {
      this.isLoading = true
      const res = await agencyList()
      const arr = res.data

      this.treeList = JSON.parse(arr)
      // console.log(this.treeList)
      this.showTree = !this.showTree
      this.isLoading = false
    },

    handleCurrentChange(val) {
      this.fromDate.page = val
      this.getList()
    },
    handleSizeChange(val) {
      this.fromDate.pageSize = val
      this.fromDate.page = 1
      this.getList()
    },
    /**
     * 渲染列表
     */
    async getList() {
      const res = await workManage({
        page: this.fromDate.page,
        pageSize: this.fromDate.pageSize
      })
      // console.log(res)
      this.list = res.data.items
      this.total = +res.data.counts
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.eel-tb{
   position: relative;
}
.tree-box {
  position: absolute;
  // width: 50%;
  // min-height: 50px;
  left: 0;
  top: 0px;
  z-index: 100;
  width: 250px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding-right: 5px;
  overflow: hidden;
  background-color: #fff;
  max-height: 200px;
  overflow: auto;
}
 ::v-deep {
    .el-tree-node__content {
      height: auto;
    }
  }
.el-tab {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}
.pag {
  text-align: center;
}
.tab {
  margin-top: 20px;
}
.btn-two {
  background: #ffeeeb;
  border-color: #f3917c;
  color: #e15536;
}
.box {
  width: 250px;
}
.btn {
  background-color: #e15536;
  color: #fff;
}
.el-card {
  margin-top: 20px;
  margin-bottom: 50px;
}
.el-btn {
  margin-right: 50px;
}
/deep/ th.date {
  .cell {
    padding-left: 17px !important;
  }
}

.work {
  width: 24px;
  height: 24px;
  background: #ffeeeb;
  border: 1px solid #e15536;
  border-radius: 50%;
  text-align: center;
  color: #e15536;
  font-size: 13px;
}
.history-name {
  width: auto !important;
  /deep/ .el-input__inner {
    width: 293px;
  }
}

.workArrange-manage-people-setting {
  /deep/ .el-dialog__body {
    padding: 30px 50px 10px 50px !important;
  }
  /deep/ .el-dialog__footer {
    padding-bottom: 40px;
  }
}

.work-type {
  /deep/ .el-form-item__content {
    margin-left: 40px !important;
  }
  /deep/ .el-radio:first-child {
    margin-right: 80px !important;
  }
  /deep/.el-radio__label {
    font-weight: bold;
    color: #333333;
  }
}

.dialog-footer {
  text-align: center;
  .el-button {
    width: 89px;
    height: 36px;
    padding: 10px 20px;
  }
}

.rest {
  width: 24px;
  height: 24px;
  background: #eff3f8;
  border: 1px solid #d8dde3;
  border-radius: 50%;
  text-align: center;
  color: #20232a;
  font-size: 13px;
}

.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}
.transport-task /deep/ .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}

// 下拉框
/deep/ .el-select {
  width: 100%;
}

/*定义滚动条轨道 内阴影+圆角*/
/deep/ .el-table--scrollable-x .el-table__body-wrapper {
  padding-bottom: 5px;
  margin-bottom: 5px;
  &::-webkit-scrollbar {
    height: 10px;
  }

  /*定义滑块 内阴影+圆角*/
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(144, 147, 153, 0.3);
  }

  &::-webkit-scrollbar-track-piece {
    margin-right: 3px;
    margin-left: 3px;
  }
}
/deep/ .el-card {
  overflow: initial;
}
</style>

<style></style>
